$.get("http://127.0.0.1:5000/bar1").then(res => {
    const myChart = echarts.init(document.getElementById('bar1'))
    const option = {
        title: {
            text: '台风风速TOP10',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '10%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            name: '名称',
            type: 'category',
            data: res.name,
        },
        yAxis: {
            name: '风速（m/s）',
            type: 'value',
            boundaryGap: [0, 0.01],
        },
        series: [
            {
                name: '风级',
                type: 'bar',
                data: res.value,
                label: {
                    show: true,
                    position: 'inside'
                },
                itemStyle: {
                    color: '#76dbe8',
                    borderRadius: [50, 50, 0, 0]
                },
                barWidth: '50%'
            },
        ]
    }
    myChart.setOption(option)
})
$.get("http://127.0.0.1:5000/line").then(res => {
    const myChart = echarts.init(document.getElementById('line'))
    const option = {
        title: {
            text: '各月台风数量折线图',
            left: 'center'
        },
        grid: {
            left: '3%',
            right: '10%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            formatter: '月份: {b0}月<br />个数: {c0}个'
        },
        xAxis: {
            name: '月份',
            type: 'category',
            data: res.name
        },
        yAxis: {
            name: '个数',
            type: 'value'
        },
        series: [
            {
                data: res.value,
                type: 'line',
                label: {
                    show: true,
                    position: 'top'
                },
            }
        ]
    }
    myChart.setOption(option)
})
$.get("http://127.0.0.1:5000/bar2").then(res => {
    const myChart = echarts.init(document.getElementById('bar2'))
    const option = {
        title: {
            text: '台风持续时间TOP10',
            left: 'center'
        },
        grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            formatter: '{b0}<br />小时: {c0}（h）'
        },
        xAxis: {
            name: '名称',
            type: 'category',
            data: res.name
        },
        yAxis: {
            name: '小时（h）',
            type: 'value'
        },
        series: [
            {
                data: res.value,
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside'
                },
            }
        ]
    }
    myChart.setOption(option)
})
$.get("http://127.0.0.1:5000/pie").then(res => {
    const myChart = echarts.init(document.getElementById('pie'))
    const option = {
        title: {
            text: '台风类型占比图',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name:'类型',
                type: 'pie',
                radius: '50%',
                data: res.data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#F6F8FC',
                    borderColor: '#8C8D8E',
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                        a: {
                            color: '#6E7079',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#8C8D8E',
                            width: '100%',
                            borderWidth: 1,
                            height: 0
                        },
                        b: {
                            color: '#4C5058',
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 33
                        },
                        per: {
                            color: '#fff',
                            backgroundColor: '#4C5058',
                            padding: [3, 4],
                            borderRadius: 4
                        }
                    }
                },
            }
        ]
    }
    myChart.setOption(option)
})
$.get("http://127.0.0.1:5000/boxplot").then(res => {
    const myChart = echarts.init(document.getElementById('boxplot'))
    const option = {
        title: [
            {
                text: '各月份中心气压箱线图',
                left: 'center'
            }
        ],
        dataset: [
            {
                // prettier-ignore
                source: res.value
            },
            {
                transform: {
                    type: 'boxplot',
                    config: {
                        itemNameFormatter: function (params) {
                            return `${res.label[params.value]}月`;
                        }
                    }
                }
            },
            {
                fromDatasetIndex: 1,
                fromTransformResult: 1
            }
        ],
        tooltip: {
            formatter: function (param) {
                return [
                    '月份: ' + param.name + ' ',
                    'Max: ' + param.data[5],
                    'Q3: ' + param.data[4],
                    'Median: ' + param.data[3],
                    'Q1: ' + param.data[2],
                    'Min: ' + param.data[1]
                ].join('<br/>');
            }
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%'
        },
        xAxis: {
            name:'月份',
            type: 'category',
            boundaryGap: true,
            nameGap: 30,
            splitArea: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            name:'hPa(中心气压)',
            type: 'value',
            splitArea: {
                show: true
            },
            min:890
        },
        series: [
            {
                name: '月份',
                type: 'boxplot',
                datasetIndex: 1
            }
        ]
    }
    myChart.setOption(option)
})